<template>
  <div class="singers-page">

    <back-nav navBg="rgba(34, 40, 49)"></back-nav>
    <Search class="fixed-search"></Search>

    <div v-show="fixedTopShow" class="fixed-top">
      <span>{{curArea}}</span><span>|</span><span>{{curSex}}</span>
    </div>

    <my-scroll
        :data = "list"
        :pulldown = "pulldown"
        @pulldown = "loadData"
        :probeType = "probeType"
        :listenScroll = "listenScroll"
        @scroll = "pageScroll"
        ref="myScroll"
        class = "container">

      <div>

        <div class="top">
          <div class="item">
            <div class="list">
              <span
              v-for="(item, index) of area" :key="index"
              @click="selectArea"
              :class="{selected: curArea == item}">{{item}}</span>
            </div>
          </div>
          <div class="item">
            <div class="list">
              <span
              v-for="(item, index) of sex"
              :key="index"
              @click="selectSex"
              :class="{selected: curSex == item}">{{item}}</span>
            </div>
          </div>
        </div>

        <div class="singer-list">
          <div class="group" v-for="(item, index) in list" :key="index">
            <span class="first-letter" :id="item.tag">{{item.tag}}</span>
            <div class="list">
              <span
              class="item"
              v-for="(fitem, findex) in item.data"
              :key="findex"
              @click="selectSinger(fitem.id, fitem.name, fitem.img1v1Url)">
                <!-- <img :src="fitem.img1v1Url" class="avatar"> -->
                <img src="" class="avatar">
                <span class="name">{{fitem.name}}</span>
              </span>
            </div>
          </div>
          <!-- ...... -->
        </div>

      </div>

    </my-scroll>

    <div class="sortList">
      <span v-for="(item, index) of sortList" :key="index" @click="toTag(index)">{{item}}</span>
    </div>

  </div>
</template>

<script>
  import MyScroll from "../components/MyScroll";
  import pinyin from "js-pinyin";
  import Search from "../components/Search";
  import BackNav from "../components/BackNav";
  export default {
    name: "Singers",
    components: {
      Search,
      BackNav,
      MyScroll
    },
    data(){
      return {
        list: [],
        sortList: [],
        pulldown: true,
        probeType: 3,
        listenScroll: true,
        fixedTopShow: false,
        curArea: '全部地区',
        curSex: '全部性别',
        area: [
          '全部地区', '华语', '韩国', '日本', '欧美'
        ],
        sex: [
          '全部性别', '男', '女', '组合'
        ],
        areaIndex: -1,
        sexIndex: -1
      };
    },
    methods:{
      loadData() {
        console.log("loadData");
        this.$axios.get('/api/artist/list?limit=50&type=-1&area=-1')
          .then(res => {
            this.initList(res);
            // console.log(res.data.artists);
          })
          .catch(err => console.log(err));
      },
      initList(res){
        this.list = [];
        this.sortList = [];
        // 提取所有 歌手信息
        let artists = [];
        // 按首字母顺序排序歌手信息
        artists = res.data.artists.sort((item1, item2) => {
          let a = pinyin.getCamelChars(item1.name.slice(0,1)).toLowerCase(),
          b = pinyin.getCamelChars(item2.name.slice(0,1)).toLowerCase();
          return a.localeCompare(b);
        });
        // 提取首字母并大写
        let reg=/^[a-zA-Z]+$/; //26个字母
        artists.forEach((val, index) => {
          let firstChar = pinyin.getCamelChars(val.name.slice(0,1));
          if(!reg.test(firstChar)){
            firstChar = '*';
          }
          this.sortList.push(firstChar);
          artists[index].tag = firstChar;
        });
        // 去除重复
        this.sortList = new Set(this.sortList);
        this.sortList = [...this.sortList];
        this.sortList.forEach(val => {
          this.list.push({
          tag: val,
          data: artists.filter(item => item.tag == val)
          })
        });
        // console.log(this.list);
      },
      pageScroll(pos){
        // console.log('pos.y: ' + pos.y);
        this.fixedTopShow = pos.y <= -100 ? true : false;
      },
      selectArea(e){
        if(this.curArea === e.target.innerText){
          return;
        }
        // console.log(e.target.innerText);
        this.curArea = e.target.innerText;

        switch(this.curArea){
          case '全部地区':
            this.areaIndex = -1;
            break;
          case '华语':
            this.areaIndex = 7;
            break;
          case '韩国':
            this.areaIndex = 16;
            break;
          case '日本':
            this.areaIndex = 8;
            break;
          case '欧美':
            this.areaIndex = 96;
            break;
        }
        this.$axios.get(`/api/artist/list?limit=50&type=${this.sexIndex}&area=${this.areaIndex}`)
          .then(res => {
            // console.log(res);
            this.initList(res);
          })
          .catch(err => { console.log(err) });
      },
      selectSex(e){
        if(this.curSex === e.target.innerText){
          return;
        }
        // console.log(e.target.innerText);
        this.curSex = e.target.innerText;

        switch(this.curSex){
          case '全部性别':
            this.sexIndex = -1;
            break;
          case '男':
            this.sexIndex = 1;
            break;
          case '女':
            this.sexIndex = 2;
            break;
          case '组合':
            this.sexIndex = 3;
            break;
        }
        this.$axios.get(`/api/artist/list?limit=50&type=${this.sexIndex}&area=${this.areaIndex}`)
          .then(res => {
            // console.log(res);
            this.initList(res);
          })
          .catch(err => { console.log(err) });
      },
      selectSinger(id, name, avatar){
        console.log('歌手ID：'+id);
        //进入歌手热门50首歌曲页面
        this.$router.push({
          name: 'singersDetail',
          params: {
            singerId: id,
            name: name,
            avatar: avatar
          }
        });
      },
      toTag(index){
        // console.log('屏幕滚动到相应的索引值：'+index);
        let el = document.getElementsByClassName("group")[index];
        this.$refs.myScroll.scrollToElement(el, 1000, 0, -40);
      }

    },
    beforeRouteEnter(to, from, next){
      if(from.name == 'singersDetail' && to.name == 'singers'){
        to.meta.isBack = true;
      }
      next();
    },
    activated(){
      // console.log("activated");
      //不是下一级页面返回来的 或者 是第一次进入该页面的 情况：
      if(!this.$route.meta.isBack || this.isFirstEnter){
        this.curArea = '全部地区';
        this.curSex = '全部性别';
        this.loadData();
      }
      this.$route.meta.isBack=false;
      this.isFirstEnter = false;
    },
    mounted() {
      // console.log("mounted");
      this.isFirstEnter = true;  //第一次进入该页面
    }
  }
</script>

<style scoped lang="scss">
  .singers-page{
    width: 100%;
    color: white;
    font-size: 0.3rem;
    background: $dark-background;
    position: absolute;
    .fixed-search{
      width: 92vw;
      position: fixed;
      top: 5px;
      left: 6vw;
      z-index: 199;
    }
    .fixed-top{
      width: 100%;
      height: 30px;
      font-size: 0.3rem;
      color: white;
      background: $dark-background;
      position: fixed;
      top: 50px;
      left: 0;
      z-index: 2;
      span{
        margin-left: 10px;
        line-height: 30px;
      }
    }
    .container{
      margin-top: 40px;
      width: 100vw;
      height: 100vh;
      overflow: auto;
      /** 这里overflow一定得加上auto或scroll或hidden，不加的话会将迷你播放器组件给挤下去屏幕一点 */
      .top{
        width: 100%;
        padding: 10px;
        .item{
          width: 100%;
          display: flex;
          .list{
            height: 50px;;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            span{
              margin-left: 10px;
              padding: 8px;
              border-radius: 2px;
              text-align: center;
            }
          }
          .selected{
            background: rgba($color: #000000, $alpha: 0.5);  
          }
        }
      }
      .singer-list{
        width: 100%;
        padding-bottom: 150px;
        .group{
          width: 100%;
          .first-letter{
            width: 100%;
            height: 30px;
            font-size: 0.4rem;
            display: flex;
            align-items: center;
            padding-left: 10px;
            background: rgba(255,255,255,0.1);
          }
          .list{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .item{
              width: 90%;
              height: 80px;
              display: flex;
              align-items: center;
              overflow: hidden;
              .avatar{
                margin-left: 10px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: #666666;
              }
              .name{
                margin-left: 15px;
                max-width: 250px;
                font-size: 0.4rem;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
    .sortList::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    .sortList{
      width: 30px;
      height: 80vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
      overflow: scroll;
      position: absolute;
      top: 10vh;
      right: 6px;
      span{
        margin-top: 10px;
        margin-bottom: 10px;
        max-width: 20px;
        color: orange;
        font-size: 0.3rem;
      }
    
    }
  }
</style>